<template>
  <div class="news-list">
    <van-card
      v-for="newslist in newslist"
      :key="newslist.id"
      :title="newslist.title"
      :thumb="newslist.img_url"
      @click="goDetail(newslist.id)"
    >
      <template #num>
        点击{{newslist.click}}次
      </template>
      <template #price>
        {{newslist.add_time}}
      </template>
    </van-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    newslist: []
  }),
  methods: {
    async getNewslist() {
      const res = await this.$http.getNewsList()
      this.newslist = res.message
    },
    goDetail(id) {
      this.$router.push('/home/newsinfo/' + id)
    }
  },
  created() {
    this.getNewslist()
  }
}
</script>
<style lang="scss" scoped>
.news-list {
  .van-card__price {
    color: red;
  }
  .van-card__content {
    min-height: 55px;
  }
  .van-card__thumb {
    height: 65px;
  }
  .van-card__title {
    width: 260px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}
</style>
